@import 'mixins';

$stencil-padding: 8px;

.joint-stencil.joint-theme-light {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    padding: 10px 0 $stencil-padding $stencil-padding;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    gap: $stencil-padding;

    &.stencil-filtered.not-found::after {
        top: 100px !important;
        left: 0;
        color: var(--jj-text-secondary);
    }

    .groups-toggle {
        display: flex;
        width: 100%;
        height: 24px;
        align-items: center;
        gap: 4px;

        .group-label {
            font-family: 'Open Sans';
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px;
            text-transform: uppercase;
            margin-left: 10px;
            padding: 0;
            order: 3;
            color: var(--jj-text-secondary);
            cursor: initial;
        }

        button.btn {
            position: relative;
            background: transparent;
            color: transparent;
            height: 20px;
            width: 20px;
            box-sizing: content-box;
            border: 1px solid var(--jj-border-secondary);
            border-radius: var(--jj-border-radius-small);
            cursor: pointer;
            padding: 0;
            transition: background 0.2s ease-in-out;

            &::before {
                display: block;
                content: '';
                background-size: 8px 12px;
                background-repeat: no-repeat;
                background-position-x: center;
                background-position-y: center;
                height: 100%;
                width: 100%;
            }

            &:hover {
                background: var(--jj-accent-hover);
            }

            &.btn-expand {
                order: 1;

                &::before {
                    background-image: url(/assets/stencil/icon-expand.svg);
                }
            }

            &.btn-collapse {
                order: 2;

                &::before {
                    background-image: url(/assets/stencil/icon-collapse.svg);
                }
            }
        }
    }

    .search-wrap {
        height: 30px;
        padding-right: $stencil-padding;

        input {
            color: var(--jj-text-tertiary);
            font-family: 'Open Sans';
            font-size: 13.333px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            height: 100%;
            padding: 7.5px 7px 7px 31.5px;
            border-radius: var(--jj-border-radius-small);
            border: 1px solid var(--jj-border-secondary);
            transition: border-color 0.2s ease-in-out;

            &:hover {
                border-color: var(--jj-border-primary);
            }

            &::placeholder {
                color: var(--jj-text-tertiary);
                font-family: 'Open Sans';
                font-size: 13.333px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                text-transform: capitalize;
            }

            &::-webkit-search-cancel-button {
                background: green;
            }
        }

        &::after {
            content: url(/assets/stencil/icon-search.svg);
            width: 15.5px;
            height: 15.5px;
            display: block;
            top: -24px;
            left: 8px;
            position: relative;
            flex-shrink: 0;
            z-index: 1;
        }
    }

    .content {
        $top-offset: 80px;

        top: $top-offset !important;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
        height: calc(100% - $top-offset);

        .group {
            padding: 0 $stencil-padding;
            flex-shrink: 0;
            @include group-open;

            & .joint-paper {
                width: 100% !important;
            }
        }

        .group-label::before {
            flex-shrink: 0;
            display: block;
            margin-right: 8px;
            margin-left: 4px;
        }

        .group.closed {
            @include group-closed;

            .group-label::before {
                @include group-icon-closed
            }
        }

        .group-label {
            border-radius: var(--jj-border-radius-small);
            background-color: var(--jj-accent-primary);
            color: var(--jj-text-primary);
            font-family: 'Open Sans';
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            padding: 6px 5px 6px 5px;
            height: 32px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            transition: background-color 0.2s ease-in-out;

            &::before {
                @include group-icon;
                content: url(/assets/stencil/icon-opened.svg);
            }

            &:hover {
                background-color: var(--jj-accent-hover);
            }
        }
    }

    .joint-viewport > g {
        pointer-events: bounding-box;
    }
}
